<template>
	<view style="background-color: #f7f7f7;height: 100vh;">
		<!-- 视频播放 -->
		<view class="novido">
			<video src="../../static/video/301470223.mp4" controls 
			    id="myvideo"
				poster="https://img1.baidu.com/it/u=3771860367,747888380&fm=224&fmt=auto&gp=0.jpg"></video>
		</view>
		<!-- 图文 -->
		<view class="tuwen">
			<image class="tuwen_left" :src="detailData.kekeimg"></image>
			<view class="tuwen_right">
				<view class="tuwen_right_name">{{detailData.kekename}}</view>
				<view class="tuwen_right_text">2009-美国-英语</view>
				<view class="tuwen_right_text">{{greendel(detailData.genres)}}</view>
				<view class="tuwen_right_text">{{detailData.durations[0]}}</view>
				<view class="tuwen_right_text">{{detailData.pubdates[0]}}</view>

				<view class="tuwen_right_kapian">
					<view class="tuwen_right_kapian_left">
						<view class="tuwen_right_kapian_left_pf">综合评分：</view>
						<view class="tuwen_right_kapian_left_pf2">{{detailData.rating.average}}</view>
					</view>
					<view class="tuwen_right_kapian_right">
						<score :innerScore="detailData.rating.average" :showNum="0"></score>
						<view class="tuwen_right_kapian_right_dianz">{{detailData.collect_count}} 人点赞</view>
					</view>

				</view>
			</view>
		</view>
		<!-- 剧情介绍 -->
		<view class="juqjies">
			<view class="juqjies_titel">剧情介绍</view>
			<view style="text-indent: 2em;">
				<text class="juqjies_text">{{detailData.summary}}</text>
			</view>
		</view>
		<!-- 演职人员 -->
		<view class="yanzryuan">
			<view class="juqjies_titel">演职人员</view>
			<scroll-view scroll-x>
				<view class="scrlist">
					<!-- <view v-for="(director,index) in detailData.directors" :key="director.id" class="yanzhiitem">
						<image :src="director.avatars.small"></image>
						<view class="yanzhiitem_name">{{director.name}}</view>
						<view class="yanzhiitem_name_en">{{director.name_en}}</view>
					</view> -->
					<view v-for="(casts,index) in detailData.casts" :key="casts.id" class="yanzhiitem">
						<image :src="casts.avatars.small" class="yanzhiitem_img"></image>
						<view class="yingy">
							<view class="ddddji">点击</view>
						</view>
						<view class="yanzhiitem_name">{{casts.name}}</view>
						<view class="yanzhiitem_name_en">{{casts.name_en}}</view>
					</view>
				</view>

			</scroll-view>
		</view>

		<!-- 剧照 -->
		<view class="yanzryuan">
			<view class="juqjies_titel">剧照</view>
			<scroll-view scroll-x>
				<view class="scrlist">
					<view v-for="(casts,index) in detailData.photos" :key="casts.id">
						<image :src="casts.cover" class="imgjuzhao" @click="previmg(casts.cover)"></image>
					</view>
				</view>

			</scroll-view>
		</view>

	</view>
</template>

<script>
	import score from '../../components/score.vue' //评分组件
	export default {
		data() {
			return {
				id: '',
				detailData: {},
				videoId:''
			}
		},
		components: {
			score
		},
		onReady() {
			//页面初次渲染完成获取video上下文
			this.videoId = uni.createVideoContext('myvideo')
		},
		onHide() {
			//页面被隐藏的时候暂停播放
			this.videoId.pause()
		},
		onShow() {
			//页面显示的时候继续播放
			// if(this.videoId){
			// 	this.videoId.play()
			// }
			
		},
		onLoad(option) {
			this.id = option.id
			uni.setNavigationBarColor({ //设置导航栏
				frontColor: "#ffffff",
				backgroundColor: "#000000"

			})

		},
		
		// #ifdef MP-WEIXIN
		//微信小程序中点击右上角分享按钮事件
		onShareAppMessage(res){
			return {
				title:'超凡蜘蛛侠',
				path:'/pages/nedek/nedek?id='+this.id,
				imageUrl:'https://img1.baidu.com/it/u=3771860367,747888380&fm=224&fmt=auto&gp=0.jpg'
			}
		},
		
		// #endif
		// #ifdef APP-PLUS
		//监听导航栏的按钮
		onNavigationBarButtonTap(e){
			uni.share({
			    provider: "weixin",
			    scene: "WXSceneSession",
			    type: 0,
			    href: "", //后期修改为自己的链接
			    title: "超凡蜘蛛侠",
			    summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
			    imageUrl: "https://img1.baidu.com/it/u=3771860367,747888380&fm=224&fmt=auto&gp=0.jpg",
			    success: function (res) {
			        console.log("success:" + JSON.stringify(res));
			    }
			});
		},
		// #endif
		created() {
			this.getDetailData()
		},
		methods: {
			//图片预览功能
			previmg(img) {
				let arr = this.detailData.photos.map(item => item.cover)
				uni.previewImage({
					current: img,
					urls:arr
				})
			},
			// 获取详情数据
			getDetailData() {
				this.detailData = require('../../static/mock/delea.json')
				this.detailData.directors.forEach(item => {
					item.avatars.small = item.avatars.small.replace('https://', 'https://images.weserv.nl/?url=')
				})
				this.detailData.casts.forEach(item => {
					item.avatars.small = item.avatars.small.replace('https://', 'https://images.weserv.nl/?url=')
				})
				this.detailData.photos.forEach(item => {
					item.cover = item.cover.replace('https://', 'https://images.weserv.nl/?url=')
				})


			},
			//数组转字符串
			greendel(val) {
				let a = val.join('/')
				return a
			},
		}
	}
</script>

<style>
	.imgjuzhao {
		width: 220rpx;
		height: 320rpx;
		margin-right: 10rpx;
		margin-top: 20rpx;
	}

	.ddddji {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.yanzhiitem:hover .yingy {
		width: 170rpx;
		height: 240rpx;
		background: #333333;
		opacity: 0.8;
		position: absolute;
		top: 0;
		color: #fff;
		font-size: 30rpx;
		display: block;

	}

	.yingy {
		width: 170rpx;
		height: 240rpx;
		background: #333333;
		opacity: 0;
		position: absolute;
		top: 0;
		color: #fff;
		font-size: 30rpx;
		display: block;
		transition: 0.5s;
		-webkit-transition: 0.5s;

	}

	.scrlist {
		display: flex;
	}

	.yanzhiitem_name_en {
		width: 180rpx;
		text-align: center;
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*不换行*/
		text-overflow: ellipsis;
		/*超出部分文字以...显示*/
		font-size: 27rpx;
		color: #a9a9a9;
	}

	.yanzhiitem_name {
		font-size: 30rpx;
		width: 170rpx;
		text-align: center;
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*不换行*/
		text-overflow: ellipsis;
		/*超出部分文字以...显示*/
	}

	.yanzhiitem {
		width: 180rpx;
		margin-right: 25rpx;
		margin-top: 20rpx;
		position: relative;
	}

	.yanzhiitem .yanzhiitem_img {
		width: 170rpx;
		height: 240rpx;
	}

	.juqjies_text {
		font-size: 30rpx;

	}

	.juqjies_titel {
		font-size: 32rpx;

		color: #a9a9a9;
	}

	.yanzryuan {
		padding: 20rpx 10rpx;
		margin: 0 10rpx;
	}

	.juqjies {

		margin: 20rpx 10rpx;
		border-top: 1px solid #ccc;
		padding: 20rpx 10rpx;
	}

	.tuwen_right_kapian_right {
		height: 107rpx;
		margin-left: -30rpx;
		/* line-height: 40rpx; */
	}

	.tuwen_right_kapian_right_dianz {
		font-size: 28rpx;
		color: grey;

		line-height: 70rpx;
	}

	.tuwen_right_kapian_left_pf2 {
		font-size: 48rpx;
		color: #feab2a;
		font-weight: 600;
		margin-left: 10rpx;
	}

	.tuwen_right_kapian_left_pf {
		font-size: 25rpx;
	}

	.tuwen_right_kapian {
		display: flex;
		background: #fff;
		width: 360rpx;
		height: 130rpx;

		margin-top: 20rpx;
		align-items: center;
		justify-content: space-evenly;
		box-shadow: 6rpx 4rpx 20rpx #dedede;
	}

	.tuwen {
		padding: 20rpx 10rpx;
		display: flex;
	}

	.tuwen_right_text {
		font-size: 30rpx;
		color: #a9a9a9;
	}

	.tuwen_right_name {
		font-size: 55rpx;
		font-weight: 600;
	}

	.tuwen_right {
		margin-left: 30rpx;
	}

	.tuwen_left {
		width: 300rpx;
		height: 400rpx;
	}

	.novido {
		width: 100%;

	}

	.novido video {
		width: 100%;

	}
</style>
